<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head th:replace="common/headcss :: headcss"></head>

<body style="background:linear-gradient(rgba(166, 222, 111, 0.25), rgba(166, 222, 111, 0.25)), url('/static/assets/img/cloud.png') no-repeat;background-size: 100%;">

<div th:replace="common/nav :: nav"></div>
<section class="page-section clearfix">
    <div class="container">
        <div class="modal-dialog" style="margin-top: 10%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="myModalLabel">注册窗口</h2>
                    <h6 class="modal-title text-center" style="color: orangered;" th:text="${ registMsg }"></h6>
                </div>
                <form method="post" action="/registnew">
                    <div class="modal-body" id="model-body">
                        <div class="form-group">
                            <input type="text" name="stunum" class="form-control" placeholder="学号（字母不区分大小写）"
                                   autocomplete="off" required>
                        </div>
                        <div class="form-group">
                            <input type="text" name="stuname" class="form-control" placeholder="姓名（2-8个汉字）" maxlength="8" minlength="2"
                                   autocomplete="off" required>
                        </div>
                        <div class="form-group">
                            <font id="passwordMSG"></font>
                            <input type="password" id="password" name="password" class="form-control" placeholder="密码，6-20位，以数字、字母开头"
                                   autocomplete="off" required onblur="checkPwd(this.value)" maxlength="20">
                        </div>
                        <div class="form-group">
                            <font id="mm2MSG"></font>
                            <input type="password" class="form-control" placeholder="请再次输入你的密码"
                                   autocomplete="off" id="mm2" required oninput="checkPwd2(this.value)">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary form-control" id="submit">提交注册</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-default form-control"><a href="/login">返回登录</a></button>
                        </div>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</section>

<div th:replace="common/footer :: footer"></div>
<div th:replace="common/footerscript :: footerscript"></div>
<script>
    /*验证密码*/
    function checkPwd(password) {
        /*获取提示框*/
        var passwordMSG = document.getElementById("passwordMSG");
        /*定义正则表达式*/
        var reg = /^[a-zA-Z0-9][~'!@#￥$%^&*()-+_=.:a-zA-Z0-9]{5,19}$/;
        var flag = reg.test(password);
        if ( !flag ) {
            passwordMSG.innerHTML = "<font color='red'>密码格式有误！</font>";
            Flag4 = false;
        } else {
            passwordMSG.innerHTML = "<font color='green'><b>√</b></font>";
            Flag4 = true;
        }
    }

    /*验证重复密码*/
    var timeoutID;
    function checkPwd2(pwd2) {
        /*获取提示框*/
        var mm2MSG = document.getElementById("mm2MSG");
        /*获取第一个框输入的密码*/
        var pwd1 = document.getElementById("password").value;
        //对上次未完成的延时操作进行取消
        clearTimeout(timeoutID);
        //对于密码比对延迟500ms，避免频繁比对
        timeoutID = setTimeout(function () {
            /*进行比对*/
            if (pwd1 != pwd2) {
                Flag5 = false;
                mm2MSG.innerHTML = "<font color='red'>两次输入的密码不一致！</font>";
                document.getElementById("submit").style.display="none";
            } else {
                Flag5 = true;
                mm2MSG.innerHTML = "<font color='green'><b>√</b></font>";
                document.getElementById("submit").style.display="inline";
            }
        }, 500);
    }
</script>
</body>

</html>